<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片无缝滚动</title>
    <style type="text/css">
        *{margin:0;padding:0;}
        #div1{
            width: 712px; height:108px;margin:100px auto;position: relative;
            overflow: hidden;
        }
        #div1 ul{position:absolute;
            left: 0px;
            top: 0px;
        }
        #div1 ul li{
            width: 178px;
            height: 108px;
            float:left;
            list-style-type:none;
        }
    </style>
    <script  type="text/javascript">
        window.onload=function()
        {
            var oDiv=document.getElementById("div1");
            var oUl=oDiv.getElementsByTagName("ul")[0];
            var aLi=oUl.getElementsByTagName("li");
            var direction_speed=2;    //向右
            oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;    //oUl的innerHTML的内容就是li，这里相当于给它把自己复制了一遍，由4个li变成8个li
            oUl.style.width=aLi[0].offsetWidth*aLi.length+"px";//oUl的宽度=单个li的宽度*li的个数
            /**
             * @函数名：move()
             * @函数功能：实现图片的无缝滚动
              */
            function move(){
                if(oUl.offsetLeft<-oUl.offsetWidth/2)    //如果向左边滚动到整个（8张图片）的一半长度时
                {
                    oUl.style.left="0";   //oUl的left：0；  把整个ul向后拉回初始位置
                }
                if(oUl.offsetLeft>0)
                {
                    oUl.style.left=-oUl.offsetWidth/2+"px";
                }
                oUl.style.left=oUl.offsetLeft+direction_speed+"px";
            }
           var timer = setInterval(move,30);
            oDiv.onmouseover=function()   //鼠标移动到图片上，停止滚动
            {
                clearInterval(timer);
            }
            oDiv.onmouseout=function()  //鼠标移开，继续滚动
            {
                timer = setInterval(move,30);
            }
            document.getElementsByTagName("input")[0].onclick=function()  //点击向左走
            {
                direction_speed=-2;
            }
            document.getElementsByTagName("input")[1].onclick=function() //点击向右走
            {
                direction_speed=2;
            }
        }
    </script>
</head>
<body>
<input type="button" value="向左走">
<input type="button" value="向右走">
<div id="div1">
    <ul>
        <li><img src="images/1.jpg"></li>
        <li><img src="images/2.jpg"></li>
        <li><img src="images/3.jpg"></li>
        <li><img src="images/4.jpg"></li>
    </ul>
</div>
</body>
</html>